<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>购物车</title>
		<link rel="stylesheet" href="../sass/css/common.css" />
		<link rel="stylesheet" type="text/css" href="../sass/css/resect.css" />
		<link rel="stylesheet" type="text/css" href="../sass/css/carts.css" />
		<style type="text/css">
		.disable {
			pointer-events: none;
		}
		</style>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="../js/display/cookie.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<!--头部-->

		<div id="header">
			<div class="top-nav">
				<a href="#">2018冬季精选新品5折起</a>
				<a href="#" class="right">在线客服</a>
				<a href="malls.html" class="right">积分商城</a>
				<a href="carts.html" class="right">购物车</a>
				<a href="login.html" class="right">注册/登录</a>
			</div>
			<div class="top-search">
				<div class="search-cont"></div>
			</div>
			<h1 title="lily index pages"></h1>
			<ul id="nav">
				<li>
					<a href="index.html" class="big">首页</a>
				</li>
				<li>
					<a href="display.html" class="big">商品</a>
				</li>
				<li>
					<a href="#" class="big">品牌</a>
				</li>

			</ul>
		</div>
		<!--购物车内容-->
		<!--<div id="wrap">
			
				<div class="pro-line2"><span>/ 我的购物车</span><span class="right">
				
						0
					
				（件）商品 
				
				</span></div>
				
				<div class="cart-list">
				

				
						<div id="shoppingCart_emptyShopCart" class="cart-nopro">
							<p>您的购物车暂无商品，快来更新您的衣柜吧</p>
							<p>&gt; <a class="btn" href="http://www.lily.sh.cn/webapp/wcs/stores/servlet/MyStoreView?catalogId=10051&amp;langId=-7&amp;storeId=10151">去购物</a></p>
						</div>
					
			</div>
			</div>-->
			
			
			<div id="wrap">
			
				<div class="pro-line2"><span>/ 我的购物车</span><span class="right">				
						1					
				（件）商品 
				<a href="#">|删除清单</a></span></div>
				</div>
			<div class="cart-list">	
						<form name="ShopCartForm" method="post" action="RESTOrderItemUpdate" id="ShopCartForm">
							<div class="listtitle">
            					<p class="title">货物</p>
           						<p class="infos">描述</p>
          						<p class="procolor">颜色</p>
            					<p class="prosize">尺寸</p>
            					<p class="pronum">数量</p>
            					<p class="price">价格</p>
            					<div class="clear"></div>
       						</div>
									<div class="item_wrapper item_wrapper_gradient">
																			
										<div class="detail" id="1"> 
											<p class="title">
								            	<a href="#">								            
														<img src="http://pic.lily.sh.cn/119110A8207.jpg" alt="收腰印花套头衫" onerror="javascript:this.src='/wcsstore/emall/mobile30/images/93.jpg'">													
												</a>
								            </p>					
								                <p class="infos"> 								          
								                	<a id="product_link_1" href="#">收腰印花套头衫</a>
								                	<br><span> 119110A82076071</span>
								                </p>
								                  <p class="procolor">
									                浅金<br>													
												 </p> 												
 													<p class="prosize">
 													S<br>														
													</p>							                	
															<div id="qty">
																<p class="pronum1" id="qty_1">数量:</p>
																<input type="hidden" value="2235232" name="orderItemId_1" id="orderItemId_1" autocomplete="off">
																<p class="pronum2 right-t num-sele">
																<a id="delNum_[Ljava.lang.String;@d7f4ecdf" href="javascript:void(0);" onclick="changeItem(0,1);" class="num-minu"></a>
																	<input type="text" pattern="[0-9]*" id="quantity_1" name="quantity_1" class="num" size="4" value="1" onfocus="javascript:updateOrderChangeButtonStyle();" "="">
																<a id="addNum_[Ljava.lang.String;@d7f4ecdf" href="javascript:void(0);" onclick="changeItem(1,1);" class="num-add"></a>
																</p>
																<div class="clear_float"></div>
															</div>														
								                		<p class="price">￥599.00</p>
											<a id="item_1_delete" href="#" class="tochart-close">删除</a>
								            <div class="clear"></div>
								            
								            
								            
								           
								        </div>	
								        
									</div>	
								
						</form>
						<div id="promotion_codes" class="item_wrapper" style="display:none;">
							<div id="promotion_container">
								<div class="left input_align"><label for="promotion_code">促销代码：&nbsp;</label></div>
								<input type="text" name="promotion_code" id="promotion_code" size="8" class="inputfield input_width_promo left" >
								<div class="clear_float"></div>
							</div>
							<div class="item_spacer_5px"></div>
							<div id="promotion_code_delete">								
								<div class="clear_float"></div>
							</div>
						</div>						 
						 <div class="cart-infos">
						 	<p><span class="cp">￥599.00</span> 产品</p>
						    <p><span>￥0.00</span>折扣</p> 
						    <p class="total"><span>￥599.00</span>订单总额</p>
				       </div>
						<div id="proceed_to_checkout">
							<div class="clear"></div>
							<div class="btn half"><input type="submit" class="checkform" value="点击结算"></div>
						</div>					
			</div>
			
				<!--以下是购物车的内容输出-->
	 <script type="text/javascript">
	 	window.onload = function(){
	 		var uid = Cookie.getCookie('yhid')
            	var item = document.querySelector('.item_wrapper');
            	console.log(uid);
            	
            	var url8 = 'http://jx.xuzhixiang.top/ap/api/cart-list.php?id='+uid;
            	$.ajax({
            		type:"get",
            		url:url8,
            		async:true,
            		success:function(res){
            			var obj = JSON.parse(res);
            			<!--<!--console.log(obj)-->-->
            			var olis = '';
            			obj.data.forEach(function(wqObj,index){
            				olis +=`
            <div class="detail" id="${index+1}"> 
				<p class="title">
	            	<a href="#">								            
							<img src="${wqObj.pimg}" alt="${wqObj.pname}" onerror="javascript:this.src='/wcsstore/emall/mobile30/images/93.jpg'">													
					</a>
	            </p>					
	                <p class="infos"> 								          
	                	<a id="product_link_1" href="#">${wqObj.pname}</a>
	                	<br><span> 119110A82076071</span>
	                </p>
	                  <p class="procolor">
		                浅金<br>													
					 </p> 												
						<p class="prosize">
						S<br>														
						</p>							                	
								<div id="qty">
									<p class="pronum1" id="qty_1">数量:</p>
									<p class="pronum2 right-t num-sele">
									<a href="javascript:;" class="num-minu"></a>
										<input type="text" pattern="[0-9]*" class="num" size="4" value="1">
									<a href="javascript:;" class="num-add"></a>
									</p>
									<div class="clear_float"></div>
								</div>														
	                		<p class="price" ispric='${wqObj.pprice}'>
	                			<span >￥</span>
	                			<span class="isjjjqqq" data-ppric='${wqObj.pprice}'>${wqObj.pprice}</span>
	                		</p>
				<a id="item_1_delete" href="javascript:;" class="tochart-close" data-id="${wqObj.pid}" index=${index+1}>删除</a>
            <div class="clear"></div>
            
        </div>
        `
            			})
            			
            			<!--console.log(olis)-->
            			<!--console.log(item.innerHTML)-->
            			item.innerHTML = olis;
            			<!--更新购物车里的数量-->
            			
	            			var iszjg = document.querySelector('.total span')
	            			var sicp = document.querySelector('.cp')
	            			var issum = 0;
	            			
	            			$('.isjjjqqq').each(function(){
	            				issum +=parseInt($(this).html());
	            				
	            			})
	            			console.log(issum);
	            			iszjg.innerHTML = '￥'+issum+'.00'
	            			sicp.innerHTML = '￥'+issum+'.00'
	            			
            			if($('.num-minu').next().val()==1){
            					$('.num-minu').addClass('disable')
            				}
            			
            			$('.num-minu').click(function(){
            				console.log('你点击了数量减');
            				$(this).next().val(parseInt($(this).next().val())-1);
            				if($(this).next().val()<=1){
            					console.log('已经最低了')
            					$(this).addClass('disable')
            				}
            				if($(this).next().val()>=2){
            					$(this).removeClass('disable')
            				}
            				var isnum = $(this).parent().parent().next().children('.isjjjqqq').attr('data-ppric')
            				var  num = parseInt(isnum)
            				
            				console.log('num:'+num)
            				var isjq = num*parseInt($(this).next().val())
            				$(this).parent().parent().next().children('.isjjjqqq').html(isjq+'.00')
            				
            				
            				var issum = 0;
            			
	            			$('.isjjjqqq').each(function(){
	            				issum +=parseInt($(this).html());
	            				
	            			})
	            			console.log(issum);
	            			iszjg.innerHTML = '￥'+issum+'.00'
	            			sicp.innerHTML = '￥'+issum+'.00'
            			})
            			$('.num-add').click(function(){
            				console.log('你点击了数量加');
            				   				
            				$(this).prev().val(parseInt($(this).prev().val())+1)
            				if($(this).prev().val()>=2){
            					console.log('数量大于2')
            					$(this).prev().prev().removeClass('disable')
            				}
            				var isnum = $(this).parent().parent().next().children('.isjjjqqq').attr('data-ppric')
            				var  num = parseInt(isnum)
            				
            				console.log('num:'+num)
            				var isjq = num*parseInt($(this).prev().val())
            				$(this).parent().parent().next().children('.isjjjqqq').html(isjq+'.00')
            				
            				var issum = 0;
	            			
	            			$('.isjjjqqq').each(function(){
	            				issum +=parseInt($(this).html());
	            				
	            			})
	            			console.log(issum);
	            			iszjg.innerHTML = '￥'+issum+'.00'
	            			sicp.innerHTML = '￥'+issum+'.00'
            			})
            			
            			
            			<!--删除按钮的实现-->
            			var delBtn = document.querySelectorAll('.tochart-close');
            			for(let i=0;i<delBtn.length;i++){
            				delBtn[i].onclick = function(){
            					console.log('你点击了删除');
            					var pid = this.getAttribute('data-id');
            					var index = this.getAttribute('index');
            					var ismove = document.getElementById(index)
            					console.log(pid);
            					var url9 = `http://jx.xuzhixiang.top/ap/api/cart-delete.php?uid=${uid}&pid=${pid}`
            					$.ajax({
									type:"get",
									url:url9,
									async:true,
									success:function(res){
										console.log('删除成功');
										ismove.remove();
										location.href='carts.html'
									}
								});
            				}
            			}
            			<!--更新每一个商品最后的价格-->
            			
            			<!--总价格-->
            		
            			
            			
            			
            		}
            	});
	 	}
            	
            </script>
			
		<!--尾部-->
		<div class="clear">

		</div>
		<hr class="idx-hr">

		<div id="footerWrapper">
			<div id="footer">
				<div class="inner">
					<div class="big">
						<img alt="" src="../img/index/logo.jpg">
						<p>年轻OL的商务着装，可能太严肃，可能太时髦，</p>
						<p>或者像Lily这样，正合适。</p>
					</div>
					<div class="left">
						<p class="title">首页</p>
						<a href="#">· 视觉大片</a>
						<a href="#">· 关于我们</a>
					</div>
					<div class="left">
						<p class="title">订单及售后</p>
						<a href="#">· 追踪我的订单</a>
						<a href="#">· 退货与换货</a>
					</div>
					<div class="left">
						<p class="title">
							<a href="#">关于Lily</a>
						</p>
						<a href="#">· 联系我们</a>
						<a href="#">· 常见问题</a>
						<a href="#">· 招商加盟</a>
						<a href="#">· 法律申明</a>
					</div>
					<div class="right">
						<p class="title">订阅通讯</p>
						<p>立即注册，了解Lily最新活动咨询</p>
						<p><input type="text" id="myemail" name="myemail" placeholder="填写您的邮箱地址"></p>

						<p>
							<a class="btn" href="#">注 册</a>
						</p>
					</div>
					<div class="clear"></div>
					<hr class="idx-hr">
					<p class="copyright">Copyright©2015-2016，lily版权所有
						<a href="http://www.miitbeian.gov.cn">沪ICP备05036513号-1</a>
					</p>
				</div>
			</div>
		</div>
	</body>

</html>